<template>
  <!-- <div> -->
  <el-drawer
    :title="drawer.title"
    :visible.sync="drawer.showModal"
    direction="rtl"
    size="70%"
    :show-close="true"
    @open="openDrawer"
    @close="closeDrawer"
  >
    <data-table
      ref="userTable"
      :request="userPage"
      :search-form="searchForm"
    >
      <template slot="search">
        <el-form-item prop="agentId">
          <el-input v-model="searchForm.agentId" type="text" placeholder="帐号" />
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="searchForm.name" type="text" placeholder="姓名" />
        </el-form-item>
        <!-- <el-form-item prop="state">
          <el-select v-model="searchForm.state" placeholder="用户状态">
            <el-option label="全部" value />
            <el-option label="正常" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item prop="checked">
          <el-select v-model="searchForm.checked" placeholder="授权状态">
            <el-option label="全部" value />
            <el-option label="已授权" :value="1" />
            <el-option label="未授权" :value="0" />
          </el-select>
        </el-form-item> -->
      </template>
      <template slot="tableColumns">
        <el-table-column prop="id" label="ID" :show-overflow-tooltip="true" />
        <el-table-column prop="agentId" label="帐号" />
        <el-table-column prop="state" label="帐号状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state === 1 ? 'success' : 'warning'">
              {{ scope.row.state === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="checked" label="添加状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.checked === true ? 'danger' : 'success'">
              {{ scope.row.checked === true ? '已添加' : '待添加' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                v-if="scope.row.checked !== true"
                v-permission="['function:admin:org:user:add']"
                type="success"
                icon="el-icon-plus"
                circle
                @click.native.prevent="grant(scope.$index, scope.row)"
              />
              <el-button
                v-if="scope.row.checked === true"
                v-permission="['function:admin:org:user:remove']"
                type="warning"
                icon="el-icon-delete"
                circle
                @click.native.prevent="revoke(scope.$index, scope.row)"
              />
            </el-button-group>
          </template>
        </el-table-column>
      </template>
    </data-table>
  <!-- </div> -->
  </el-drawer>
</template>
<script>
import DataTable from '@/components/datatable/data-table';
import { save, remove, findOrgRelUserPage } from '@/api/admin/org-user';

export default {
  name: 'OrgRelUser',
  components: {
    DataTable
  },
  props: {
    orgId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      userPage: findOrgRelUserPage,
      drawer: {
        title: '',
        showModal: false
      },
      searchForm: {
        agentId: null,
        name: null,
        orgId: this.orgId,
        checked: null
      }
    };
  },
  methods: {
    openDrawer() {
      if (this.$refs.userTable) {
        this.$refs.userTable.loadData();
      }
    },
    closeDrawer() {
      this.$parent.$refs.customTable.loadData();
    },
    grant(index, row) {
      this.$confirm('该部门将新增:【' + row.agentId + '】,姓名:【' + row.name + '】的员工，请确认!', '新增员工', {
        type: 'warning'
      }).then(() => {
        const params = {
          orgId: this.orgId,
          userId: row.id
        };
        save(params).then(response => {
          const result = response.data;
          let title, type, text;
          if (result.code === 0) {
            title = '成功';
            type = 'success';
            this.$refs.userTable.loadData();
          } else {
            title = result.code;
            text = result.msg;
            type = 'error';
          }
          this.$notify({
            title: title,
            message: text,
            type: type
          });
        });
      }).catch(() => {});
    },
    revoke(index, row) {
      this.$confirm(
        '该操作将用户名:【' + row.agentId + '】,姓名:【' + row.name + '】的员工移出本部门，请确认!',
        '提示', {
          type: 'warning'
        }).then(() => {
        remove(row.relId).then(response => {
          const result = response.data;
          let title, type, text;
          if (result.code === 0) {
            title = '成功';
            type = 'success';
            this.$refs.userTable.loadData();
          } else {
            title = result.code;
            text = result.msg;
            type = 'error';
          }
          this.$notify({
            title: title,
            message: text,
            type: type
          });
        });
      }).catch(() => {});
    }
  }
};
</script>
